<template>
  <div>
<el-row>
<!--  树形-->
  <el-col :span="5">
    <el-card>
      <el-tree
        :data="treedata"
        :props="defaultProps"
        @node-click="handleNodeClick"
        :expand-on-click-node="false"
        node-key="id"
        :default-expanded-keys="['1024985257948084801']"
        :default-checked-keys="['1024985257948084801']"
      ></el-tree>
    </el-card>
<!--地图部分-->
  </el-col>
  <el-col :span="19">
    <el-card>
      <el-row type="flex" justify="space-between">
        <el-col :span="20">
          <h1>作业范围分配</h1>
        </el-col>
        <el-col :span="2" v-if="buttonShow1" ref="asRef">
          <el-button type="danger" @click="edit">编辑</el-button>
          <el-button type="danger" @click="video">视频监控</el-button>
          <el-button type="danger" @click="video1">视频监控2</el-button>
        </el-col>
        <el-col :span="4" ref="colRef" v-if="buttonShow">
          <el-button type="danger">保存</el-button>
          <el-button @click="edit1">取消</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-form>
          <el-form-item label-width="100px" label="地区关键字：">
            <el-input placeholder="请输入地区关键字" v-model="keyword" style="width: 300px"/>
          </el-form-item>
        </el-form>
      </el-row>
      <el-row v-if="buttonShow2">
        <el-button type="danger" @click="edit2">开始绘制</el-button>
      </el-row>
      <el-row v-if="buttonShow3">
        <el-button type="danger" @click="edit3">完成绘制</el-button>
        <el-button @click="edit4">删除围栏</el-button>
      </el-row>
      <el-row v-if="alertshow1">
        <el-alert
          title="点击或拖动鼠标绘制作业范围，右击鼠标结束图形绘制，图形不可有交叉点。完成绘制后，点击提交按钮保存。每个机构仅可支持绘制一个作业范围"
          type="warning"
          show-icon/>
      </el-row>
      <el-row>
        <baidu-map class="map" :center="{lng: longitude, lat: latitude}"  @click="addPolygonPoint"  :zoom="15" :scroll-wheel-zoom="true">
          <bm-polygon
            :path="polygonPath"
            stroke-color="red"
            :strokeWeight="two"
            fillColor="pink"
            :stroke-opacity="num1"
            :fillOpacity="num1"
            :editing="editshow"
            strokeStyle="dashed"
            @lineupdate="updatePolygonPath"/>
        </baidu-map>
        <bm-local-search :keyword="keyword" :auto-viewport="true"></bm-local-search>
      </el-row>
    </el-card>
  </el-col>
</el-row>
  </div>
</template>

<script>
import { GetListApi } from '@/api/instiution'
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
import { getScopeAPI } from '@/api/institutions-job-area'

export default {
  components: {
    BaiduMap
  },
  name: 'institutions',
  data () {
    return {
      treedata: [], // 树形数据
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      two: +(2),
      num1: +(0.2),
      buttonShow: false,
      buttonShow1: true,
      buttonShow2: false,
      buttonShow3: false,
      alertshow: true,
      alertshow1: false,
      editshow: false,
      change: '',
      latitude: '',
      longitude: '',
      polygonPath: [
        { lng: 116.412732, lat: 39.911707 },
        { lng: 116.39455, lat: 39.910932 },
        { lng: 116.403461, lat: 39.921336 }
      ],
      arr: [],
      keyword: '杭州'
    }
  },
  async created () {
    this.getData()
    const res = await getScopeAPI('1024985257948084801', {
      0: '1024985257948084801'
    })
    console.log(res)
    this.longitude = res.data.longitude
    this.latitude = res.data.latitude
    this.polygonPath = res.data.polygon.map(item => {
      return {
        lng: item.longitude,
        lat: item.latitude
      }
    })
    console.log(this.polygonPath)
  },
  methods: {
    // 获取树形数据
    async getData () {
      const res = await GetListApi()
      console.log(res)
      this.treedata = JSON.parse(res.data)
      // console.log(this.treedata)
    },
    // tree组件，点击节点触发
    async handleNodeClick (data) {
      console.log(data)
      const res = await getScopeAPI(data.id, {
        0: data.id
      })
      console.log(res)
      this.longitude = res.data.longitude
      this.latitude = res.data.latitude
      console.log(res.data.polygon)
      // const arr = res.data.polygon
      // console.log(arr)
      this.polygonPath = res.data.polygon.map(item => {
        return {
          lng: item.longitude,
          lat: item.latitude
        }
      })
      console.log(this.polygonPath)
    },
    edit () {
      this.buttonShow = true
      console.log(this.$refs.colRef)
      // this.$nextTick(() => {
      //   console.log(this.$refs.colRef)
      // })
      this.buttonShow1 = false
      this.buttonShow2 = true
      this.alertshow = false
      this.alertshow1 = true
    },
    edit1 () {
      this.buttonShow = false
      this.buttonShow1 = true
      this.buttonShow2 = false
      this.buttonShow3 = false
      this.alertshow = true
      this.alertshow1 = false
    },
    edit2 () {
      this.editshow = true
      this.buttonShow2 = false
      this.buttonShow3 = true
    },
    edit3 () {
      this.editshow = false
      this.buttonShow2 = true
      this.buttonShow3 = false
    },
    edit4 () {
      this.buttonShow2 = true
      this.buttonShow3 = false
    },
    // 地图 覆盖物的属性发生变化时触发
    updatePolygonPath (e) {
      this.polygonPath = e.target.getPath()
    },
    // 地图
    async getMap () {
      // const res = await getScopeAPI(this.id, {
      //   0: this.this.id
      // })
      // console.log(res)
    },
    // 添加多边形点
    addPolygonPoint (e) {
      this.polygonPath.push(e.point)
    },
    // 视频监控
    video () {
      this.$router.push('/business/order-detail')
    },
    // 视频监控
    video1 () {
      this.$router.push('/business/waybill-manage')
    }
  }
}
</script>
<style>
.div{
  display: flex;
  justify-content: space-between;
}
.map{
  width: 100%;
  height: 700px;
}
</style>
